<template>
	<div class="newPage-bindCard">
		<x-header :left-options="{backText: ''}" class="head">绑定银行卡</x-header>
		<div class="status">
			<img src="../../assets/msg-imgs/msh_role02.png" />
			<p>看看卡包里忧伤的卡<br />默默掏出来搞事情</p>
		</div>
		<group class="input-msg">
			<x-input label-width="1.5rem" class="fix-label" title="姓名" value="张*某" :readonly="true"></x-input>
			<x-input label-width="1.5rem" class="fix-label" title="身份证号" :readonly="true" value="310************034"></x-input>
		</group>
		<group class="input-msg">
			<x-input label-width="1.5rem" class="fix-label" title="发卡银行" placeholder="请选择发卡银行" :readonly="true" >
				<img slot="right" src="../../assets/msg-imgs/cor_right.png" class="vertical-m" style="height: .51rem"/>
			</x-input>
			<x-input label-width="1.5rem" class="fix-label" title="卡号" placeholder="请输入储蓄卡卡号" ></x-input>
			<x-input label-width="1.5rem" title="手机号" class="fix-label" name="mobile" placeholder="请输入手机号码" keyboard="number" is-type="china-mobile" :required="true">
			</x-input>
			<x-input label-width="1.5rem" title="验证码" placeholder="请输入验证码">
		        <x-button slot="right" mini :gradients="['#FF4C5D', '#FF4C5D']">重发验证码</x-button>
		    </x-input>
		</group>
		<div class="accept">
			<input type="checkbox" />
			<p><span>同意</span><span>《委托扣款授权书》</span></p>
			<button class="tijiao">提交</button>
		</div>
		<div class="contact-user">
			<span>联系客服</span>
		</div>
		<Alert v-model="show" :title="''" :button-text="'知道了'" class="msg-alert">
			<slot>
				<h1>手机号说明</h1>
				<span>您正在申请马上花服务，您同意并授权将个人信息提供给马上花服务方，该信息仅用于您的信用消费服务申请。</span>
			</slot>
		</Alert>
	</div>
</template>

<script>
	import { XHeader, XInput, Group, Cell, XButton, Alert } from 'vux'
	export default {
		components: {
	      XHeader,
	      XInput,
	      Group,
	      Cell,
	      XButton,
	      Alert
	    },
	    created(){
	      document.title = '马上花';
	    },
	    data () {
	      return {
	        show: true
	      }
	    },
	    methods: {
	    	onHide () {
		      console.log('on hide')
		    },
		    onShow () {
		      this.$set(this.$data, 'show', true)
		    }
	    }
	}
</script>

<style lang="less" rel="stylesheet/less">
	@import '../styles/main.less';
	.newPage-bindCard {
		.head {
			background: #F8F8F8;
			h1 {
				color: #030303;
				font-size: .4rem;
			}

		}
		.status {
			text-align: center;
			margin-top: .2rem;
			p {
				font-size: .28rem;
				margin-top: .1rem;
			}
		}
		.input-msg {
			.fix-label {
				padding-left: .4rem;
				padding-right: .4rem;
				input {
					color: #636363;
				}
			}
		}
		.accept {
			display: table;
			width: 90%;
			margin: 0 auto;
			span {
				font-size: .26rem;
			}
			input, p {
				display: table-cell;
				vertical-align: middle;
			}
			input {
				margin: 0;
				width: .32rem;
				height: .32rem;
				vertical-align: middle;
			}
			p {
				display: inline-block;
				vertical-align: middle;
				padding-left: .1rem;
				span {
					color: #999;
					&:last-child {
						color: #FBC200;
					}
				}
			}
			button.tijiao {
				width: 94%;
				height: .9rem;
				background: #FBC200;
				border: none;
				display: block;
				margin: 0 auto;
				border-radius: .05rem;
				font-size: .32rem;
				color:#464646;
			}
		}
		.contact-user {
			text-align: center;
			margin-top: .2rem;
			span {
				font-size: .26rem;
				color: #909090;
			}
		}
		.msg-alert {
			h1{
				font-size: .32rem;
				color:#464646;
			}
			img {
				margin: 0 auto;
			}
			span {
				text-align: left;
				display: block;
				font-size: .3rem;
				margin: .3rem 0;
				line-height: .45rem;
				color: #909090;
			}
			.weui-dialog__ft {
				background: #FBC200;
				a {
					color:#464646;
				}
			}
		}
	}
</style>